<!--
 * @Author: liaoxing
 * @Date: 2021-08-18 09:41:39
 * @LastEditors: liaoxing
 * @LastEditTime: 2021-08-24 11:28:49
 * @Description: file content
 * @FilePath: \数据中心\src\views\home\BoardPage\FinanceBoard\Chart1.vue
-->
<script>
const echarts = require('echarts')

export default {
  components: {},
  props: ['dataList', 'type'],
  data(){
    return {
      currentNav: '',
      color: ['#46e70b', '#ff690c', '#30ccfb', '#09c49a', '#ffa40c', '#f26f5e',  "#297af2", "#ffa916", "#15f1c6", "#4f32f3"],
      myChart: null
    }
  },
  watch: {
    dataList (val) {
      this.getOption()
    }
  },
  mounted(){
    this.myChart = echarts.init(this.$refs.charDom)
    this.getOption()
    console.log(this.type)
  },
  methods: {
    getOption () {
      let dataArr = []
      this.dataList.income.forEach((e, i) => {
        let temp = {}
        temp.value = e
        if (i > this.color.length - 1) {
          this.color = this.color.concat(JSON.parse(JSON.stringify(this.color)))
        }
        temp.itemStyle = {color: this.color[i]}
        dataArr.push(temp)
      })
      this.myChart.setOption({
        title: { text: '' },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          },
          borderWidth: 0,
          borderColor: '#104db1',
          backgroundColor: '#104db1',
          textStyle: {
            color: '#fff'
          }
        },
        color: this.color,
        grid: {
          left: '15%'
        },
        xAxis: {
          data: this.dataList.xAxis,
          axisLabel: {
            color: 'white'
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          name: '元',
          nameTextStyle: {
            color: 'white'
          },
          axisLabel: {
            color: 'white'
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: '计划' + (this.type === 'cost' ?  '投入' : '收入'),
            type: 'bar',
            data: this.dataList.aps,
            itemStyle: {color: '#0c2f74', borderColor: '#fff', borderWidth: 2, borderRadius: [4, 4, 0, 0]}
          },
          {
            name: '实际' + (this.type === 'cost' ?  '投入' : '收入'),
            type: 'bar',

            itemStyle: {borderRadius: [5, 5, 0, 0]},
            data: dataArr
          }
        ]
      })
    }
  },
  render(){
    return <div>
      <div ref='charDom' style='width:100%;height:310px;'></div>
    </div>
  }
}
</script>

<style scoped lang='less'>
.title {
  font-size: 24px;
  font-weight: 400;
  color: #E9F2F9;
  text-align: center;
}
</style>
